<template>
  <div class="home" id="home">
    <!-- <h1>我是home组件</h1> -->
    <el-row :gutter="10">
      <!-- 左侧 -->
      <el-col :span="8">
        <div class="user-info">
          <!-- 用户信息卡片 -->
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div class="user-top">
              <img
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                alt=""
                class="img"
              />
              <div class="user-name">
                <h4>Admin</h4>
                <h6>超级管理员</h6>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="card-bottom">卡片下半部分</div>
          </el-card>
        </div>
        <!-- 左侧数据卡片 -->
        <el-card
          ><el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="名称"> </el-table-column>
            <el-table-column prop="todayBuy" label="今日购买"> </el-table-column>
            <el-table-column prop="monthBuy" label="本月购买"> </el-table-column>
            <el-table-column prop="totalBuy" label="总购买"> </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!-- 右侧区域 -->
      <el-col :span="16">
        <!-- home右侧数据展示区 -->
        <div class="data-info">
          <div class="data-top">
            <div v-for="item in countData" :key="item.name">
              <data-card :cardData="item"></data-card>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 10px">
      <el-col :span="6">
        <div class="big-screen-btn">
          <el-button type="primary" @click="openInNewTab">跳转旧大屏</el-button>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="big-screen-btn">
          <el-button type="primary" @click="openNewBigScreen">跳转新大屏</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { tableData, countData } from "@/data/tableData.js";
import DataCard from "@/components/DataCard.vue";
import { getNews } from "@/service/home.js";
export default {
  props: {},
  components: {
    DataCard,
  },
  data() {
    return {
      tableData,
      countData,
    };
  },
  computed: {},
  watch: {},
  async created() {
    try {
      // 测试用 - 添加错误处理
      const res = await getNews();
      console.log("新闻数据:", res.result);
    } catch (err) {
      console.error("获取新闻数据失败:", err);
      // 显示友好的提示信息，而不是阻塞页面
      this.$message({
        message: "数据加载中，请稍候...",
        type: "info",
        duration: 2000,
      });
    }
  },
  mounted() {
    console.log(window.location.origin);
  },
  methods: {
    openInNewTab() {
      // 获取当前路由的完整 URL，这通常需要通过 `process.env.BASE_URL` 或者手动拼接得到
      // 假设你的 Vue 应用部署在根路径下，则可以简单地写成如下形式：
      const url = window.location.origin + "/#/largeScreen";

      // 使用 window.open 打开新的标签页
      window.open(url, "_blank");
      console.log(url);

      // 方法二
      //  const a = this.$router.resolve({
      //     name: 'login'
      //   })
      //   console.log(a)
      //   window.open(a.href, '_blank')
    },
    openNewBigScreen() {
      this.$router.push("/bigScreen");
    },
  },
};
</script>

<style scoped lang="less">
.home {
  .user-info {
    // background-color: aqua;
    margin-bottom: 10px;
    .user-top {
      display: flex;
      align-items: center;
      .img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
      .user-name {
        h6,
        h4 {
          margin: 10px;
        }
      }
    }
    .el-divider {
      margin: 10px 0;
    }
  }
  .data-info {
    .data-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // align-items: center;
    }
    // background-color: rebeccapurple;
  }
}
</style>
